<template name="zDescpicCreate">
	<view class="center-view">
		
		<image v-show="src.length > 0" :src="src" :style="{width:realWidth,height:realHeight}"/>
		<view @click="uploadPic" v-show="src.length == 0"  :style="{width:realWidth,height:realHeight}" class="center-view">
			<image src="/static/picture.svg" />
			<text style="text-align:center;fontSize:150%">选择图片</text>
		</view>
		
		<!-- <button @click="uploadPic">上传</button> -->
		<view class="option-item" v-show="src!=''">
			<text class="item-name">图片高度</text><input type="number" v-model="height" class="item-content theme-input" style="width:100upx;text-align:right"/>
		</view>
		<view class="option-item" v-show="src!=''">
			<text class="item-name">图片宽度</text><input type="number" v-model="width" class="item-content theme-input" style="width:100upx;text-align:right"/>
		</view>
	</view>
</template>
<script>
	export default {
		name : "zDescpicCreate",
		data() {
			return {
				height : 520,
				width : 520,
				src : "",
				format : "",
				finalSrc : null,
				base64 : ""
			};
		},
		props : {

		},
		created : function(e){
			
		},
		computed : {
			realWidth() {
				return uni.upx2px(this.width) + 'px';
			},
			realHeight() {
				return uni.upx2px(this.height) + 'px';
			}
		},
		methods: {
			urlTobase64 :function(url,format,id,questions) {
				var vm = this;
				var base64 = '';
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer',
					success: res => {
						let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
						base64 = 'data:image/' + format + ';base64,' + base64; //不加上这串字符，在页面无法显示
						// console.log(base64);
						var param = {'picCode':base64,'maxSize':32};
						vm.$post(vm.fileurl + '/file/uploadPicByCode',param,function(res){
							var data = res.data;
							if(data.code != 0){
								uni.showModal({
									title : '错误',
									content : data.message,
									showCancel : false
								})
								return ;
							}						
							var res = {}
							res['key'] = 'q' + id;
							res['type'] = 'zdescpic';
							var answer = {};
							answer['height'] = vm.realHeight;
							answer['width'] = vm.realWidth;
							answer['src'] = data.object;
							res['answer'] = answer;
							this.que = '';
							this.maxSize = 32;
							this.empty = false;
							questions.push(res);
							uni.hideLoading();
						});
					}
				})
			},
			get : function(id,questions){
				if(this.height == '' || this.width == '' || this.width > 1000 || this.width <= 0 || this.height > 1000 || this.height <= 0){
					uni.showModal({
						title : '错误',
						content : '请填写合理的图片高度和宽度',
						showCancel : false
					})
				}
				uni.showLoading({
					title : '图片上传中'
				})
				// Base64编码正式上传图片到服务器上
				this.urlTobase64(this.src,this.format,id,questions);
				this.src='';
				
			},
			uploadPic : function(){
				var vm = this;
				uni.chooseImage({
					count: 1,
					success: res => {
						// this.imageList = this.imageList.concat(res.tempFilePaths);
						// console.log(res);
						vm.src = res.tempFilePaths[0];
						var parts = res.tempFiles[0].name.split(".");
						vm.format = parts[parts.length - 1];
						
						// console.log(vm.format)
						// this.tempFilePaths = res.tempFilePaths[0];
						// this.urlTobase64(res.tempFilePaths[0]);
					}
				});
			}
		}
	}
</script>

<style>
	@import "../../../common/zcss.css";
	@import "./creator.css";
</style>
